<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="https://gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>vue的组件 &middot; 我的博客</title>
  <meta name="description" content="" />

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-09 ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       这里是任永刚的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>vue的组件</h1>
  <time datetime=2020-04-22T00:00:00Z class="post-date">Wed, Apr 22, 2020</time>
  <h1 id="vue的组件">vue的组件</h1>
<h2 id="1-1-底层学习组件">1-1 底层学习组件</h2>
<pre><code>组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

//html
&lt;div id=&quot;app&quot;&gt;
&lt;my-test&gt;&lt;/my-test&gt; &lt;!--自定义标签--&gt;
&lt;/div&gt;

//js
Vue.component('my-test',{  //注册组件
template:'&lt;div&gt;初学组件&lt;/div&gt;'       
});

new Vue({
el:&quot;#app&quot;
})
</code></pre>
<h2 id="1-2-父子组件通信">1-2 父子组件通信</h2>
<pre><code>利用props进行传值

//局部组件
&lt;div id=&quot;app&quot;&gt;
&lt;my-test msg=&quot;你好&quot;&gt;&lt;/my-test&gt;
&lt;my-test msg=&quot;传值2&quot;&gt;&lt;/my-test&gt;
&lt;/div&gt;
//js
new Vue({
el:&quot;#app&quot;,
components:{
    'my-test':{
    props:['msg'],
    template:'&lt;div&gt;{{msg}}&lt;/div&gt;'
    }
}
})
//全局组件
&lt;div id=&quot;app&quot;&gt;
&lt;my-test msg=&quot;你好&quot;&gt;&lt;/my-test&gt;
&lt;my-test msg=&quot;传值2&quot;&gt;&lt;/my-test&gt;
&lt;/div&gt;

//js
Vue.component('my-test',{
props:['msg'],
template:'&lt;div&gt;{{msg}}&lt;/div&gt;'
})
</code></pre>
<h2 id="如果需要传的值在vue的实例中">如果需要传的值在vue的实例中</h2>
<pre><code>//html
&lt;div id=&quot;app&quot;&gt;
&lt;my-test v-bind:listData=&quot;list&quot;&gt;&lt;/my-test&gt;
&lt;/div&gt;

//js
new Vue({
el:&quot;#app&quot;,
data:{
    list:[
    {title:'这是数据'},
    {title:'这是数据22'}
    ]
},
components:{
    'my-test':{
    props:['listData'],
    template:`
        &lt;select name=&quot;&quot; id=&quot;&quot;&gt;
        &lt;option v-for=&quot;item in listData&quot;&gt;{{item.title}}&lt;/option&gt;
        &lt;/select&gt;
    `
    }
}
})
Top
</code></pre>

</div>


    </main>

    
      
    
  </body>
</html>
